import React, { Component ,Suspense} from 'react';
import { Switch, Route, Redirect } from "react-router-dom"
import loading from '../assets/loading.gif'
class RouterVeiw extends Component {
    render() {
        // 从路由对象里面解构出所有路由表信息
        var { routers } = this.props
        // 过滤出普通路由表
        var ordinaryRouters = routers.filter((item, index) => {
            return item.path && item.component
        })
        //过滤重定向路由
        var redirectRouters = routers.filter((item, index) => {
            return item.redirect
        })
        // 过滤404路由
        var fonRouter = routers.filter((item, index) => {
            return item.component && !item.path
        })
        return (
            <Suspense fallback={<img className="com_loading" src={loading} />}>
            <Switch>
                {/* 渲染普通路由 */}
                {
                    ordinaryRouters.map((item, index) => {
                        return (
                            <Route key={index} exact={item.exact || false} path={item.path} render={(props) => {
                                // 有子路由
                                if (item.children && item.children.length > 0) {
                                    // 封装时必须将props传给路由组件，避免props的丢失
                                    return <item.component {...props} routers={item.children}></item.component>
                                } else {
                                    return <item.component {...props}></item.component>
                                }
                            }}></Route>
                        )
                    })
                }
                {/* 渲染重定向路由 */}
                {
                    redirectRouters.map((item, index) => {
                        return (
                            <Redirect key={index} exact from={item.from} to={item.to}></Redirect>

                        )
                    })
                }
                {/* 渲染404路由 */}
                {
                    fonRouter.map((item, index) => {
                        return (
                            <Route key={index} exact component={item.component}></Route>
                        )
                    })
                }
            </Switch>
            </Suspense>
        );
    }
}

export default RouterVeiw;